import React, {Component} from "react";
import ReactEcharts from 'echarts-for-react';
import echarts from 'echarts/lib/echarts';
import { Table } from 'antd';
import picture from '../timg.jpg';
import axios from "axios";
import {server_addr} from "../index";

export default class Fund_1 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            option_1: {},
            option_2: {},
            option_3: {},
            option_4: {},
            option_5: {},
            default: "83%"
        }
        this.getData = this.getData.bind(this);
    }

    getData(){
        var stock = window.location.href.split('?')[1].split('=')[1];
        //资金流向 依次是小单、中单、大单、超大单、涨跌幅
        axios.get(server_addr+"/capital/flow?stock="+stock,{}).then((res)=>{
            let dates = [];
            let data_1 = [];
            let data_2 = [];
            let data_3 = [];
            let data_4 = [];
            let data_5 = [];
            for(var key in res.data){
                dates.push(key);
                data_1.push(res.data[key].split(',')[0]);
                data_2.push(res.data[key].split(',')[1]);
                data_3.push(res.data[key].split(',')[2]);
                data_4.push(res.data[key].split(',')[3]);
                data_5.push(res.data[key].split(',')[4]);
            }
            this.setState({
                option_1: {
                    legend: [{
                        top: 10,
                        data: ['N日超大单资金净流入','N日大单资金净流入'],
                        itemHeight: 5,
                        itemWidth: 10,
                        textStyle: {
                            fontSize: 12
                        }
                    },{
                        top: 30,
                        data: ['N日中单资金净流入','N日小单资金净流入'],
                        itemHeight: 5,
                        itemWidth: 10,
                        textStyle: {
                            fontSize: 12
                        }
                    }],
                    tooltip: {
                        trigger: 'axis',
                        transitionDuration:0,
                        axisPointer: {
                            type: 'line'
                        },
                        formatter: function (params) {
                            var htmlStr = '';
                            htmlStr += '<div><span style="color:#fff;">' + params[0].name + '</span><br/> ';
                            for(var i=0;i<params.length;i++){
                                //前面的原点和他的颜色
                                htmlStr += '<span style="width: 8px;height: 8px;display:inline-block;border-radius: 50%;background-color:'+params[i].color+'"></span><span style="color:#fff;">&nbsp;' + params[i].seriesName + '&nbsp;:&nbsp;</span>'+
                                    '<span style="color:#fff;">' + params[i].value + '&nbsp;万元</span><br/>';
                            }
                            htmlStr += '</div>';
                            return  htmlStr
                        }
                    },
                    toolbox: {
                        right: 50,
                        show: true,
                        feature: {
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: ['line']},
                            restore: {show: true}
                        }
                    },
                    grid: [
                        {
                            left: '10%',
                            right: '10%',
                            bottom: 60,
                            top: 60
                        }
                    ],
                    dataZoom: [{
                        type: 'slider',
                        realtime: false,
                        start: 50,
                        end: 100,
                        top: 300,
                        height: 15,
                        handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                        handleSize: '120%'
                    }, {
                        type: 'inside',
                        start: 40,
                        end: 70,
                        top: 30,
                        height: 20
                    }],
                    xAxis: [{
                        type: 'category',
                        data: dates.reverse(),
                        boundaryGap: true,
                        axisLine: {lineStyle: {color: '#777'}},
                        axisLabel: {
                            formatter: function (value) {
                                return echarts.format.formatTime('MM-dd', value);
                            },
                            fontSize: 10,
                            rotate: 35,
                        },
                        min: 'dataMin',
                        max: 'dataMax',
                        axisPointer: {
                            show: true
                        }
                    }],
                    yAxis: [{
                        scale: true,
                        name: '万元        ',
                        axisLine: {lineStyle: {color: '#777'}},
                        splitLine: {show: true},
                        axisTick: {show: false},
                        axisLabel: {
                            fontSize: 10
                        }
                    },{
                        scale: true,
                        axisLine: {lineStyle: {color: '#777'}},
                        axisTick: {show: false},
                        axisLabel: {
                            fontSize: 10
                        }
                    }],
                    series: [
                        {
                            name: 'N日超大单资金净流入',
                            type: 'bar',
                            itemStyle:{
                                normal:{
                                    color: '#14b143',
                                    barBorderRadius: 3
                                }
                            },
                            data: data_4.reverse()
                        },
                        {
                            name: 'N日大单资金净流入',
                            type: 'bar',
                            itemStyle:{
                                normal:{
                                    color: '#ba55d3',
                                    barBorderRadius: 3
                                }
                            },
                            data: data_3.reverse(),
                        },
                        {
                            name: 'N日中单资金净流入',
                            type: 'bar',
                            itemStyle:{
                                normal:{
                                    color: '#60C0DD',
                                    barBorderRadius: 3
                                }
                            },
                            data: data_2.reverse(),
                        },
                        {
                            name: 'N日小单资金净流入',
                            type: 'bar',
                            symbol: 'none',
                            itemStyle:{
                                normal:{
                                    color: '#E87C25',
                                    barBorderRadius: 3
                                }
                            },
                            data: data_1.reverse()
                        }
                    ]
                },
                option_2: {
                    legend: [{
                        top: 0,
                        data: ['涨跌幅','N日超大单资金净流入'],
                        textStyle: {
                            fontSize: 12
                        }
                    }],
                    tooltip: {
                        trigger: 'axis',
                        transitionDuration:0,
                        axisPointer: {
                            type: 'line'
                        }
                    },
                    grid: [
                        {
                            left: '20%',
                            right: '20%',
                            bottom: 50,
                            top: 30
                        }
                    ],
                    dataZoom: [{
                        type: 'slider',
                        realtime: false,
                        start: 50,
                        end: 100,
                        top: 160,
                        height: 10,
                        handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                        handleSize: '120%'
                    }, {
                        type: 'inside',
                        start: 40,
                        end: 70,
                        top: 30,
                        height: 20
                    }],
                    xAxis: [{
                        type: 'category',
                        data: dates.reverse(),
                        boundaryGap: true,
                        axisLine: {lineStyle: {color: '#777'}},
                        axisLabel: {
                            formatter: function (value) {
                                return echarts.format.formatTime('MM-dd', value);
                            },
                            fontSize: 10,
                            rotate: 35,
                        },
                        min: 'dataMin',
                        max: 'dataMax',
                        axisPointer: {
                            show: true
                        }
                    }],
                    yAxis: [{
                        scale: true,
                        axisLine: {lineStyle: {color: '#777'}},
                        splitLine: {show: true},
                        axisTick: {show: false},
                        axisLabel: {
                            fontSize: 10
                        }
                    },{
                        scale: true,
                        axisLine: {lineStyle: {color: '#777'}},
                        axisTick: {show: false},
                        axisLabel: {
                            fontSize: 10
                        }
                    }],
                    series: [
                        {
                            name: '涨跌幅',
                            type: 'line',
                            yAxisIndex: 1,
                            symbol: 'none',
                            smooth: 0.5,
                            itemStyle:{
                                normal:{
                                    lineStyle: {
                                        width: 3.5
                                    },
                                    color:'#ef232a'
                                }
                            },
                            data: data_5.reverse()
                        },
                        {
                            name: 'N日超大单资金净流入',
                            type: 'line',
                            symbol: 'none',
                            smooth: 0.5,
                            itemStyle:{
                                normal:{
                                    lineStyle: {
                                        width: 3.5
                                    },
                                    color: '#14b143'
                                }
                            },
                            data: data_4.reverse()
                        }
                    ]
                },
                option_3: {
                    legend: [{
                        top: 0,
                        data: ['涨跌幅','N日大单资金净流入'],
                        textStyle: {
                            fontSize: 12
                        }
                    }],
                    tooltip: {
                        trigger: 'axis',
                        transitionDuration:0,
                        axisPointer: {
                            type: 'line'
                        }
                    },
                    grid: [
                        {
                            left: '20%',
                            right: '20%',
                            bottom: 50,
                            top: 30
                        }
                    ],
                    dataZoom: [{
                        type: 'slider',
                        realtime: false,
                        start: 50,
                        end: 100,
                        top: 160,
                        height: 10,
                        handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                        handleSize: '120%'
                    }, {
                        type: 'inside',
                        start: 40,
                        end: 70,
                        top: 30,
                        height: 20
                    }],
                    xAxis: [{
                        type: 'category',
                        data: dates.reverse(),
                        boundaryGap: true,
                        axisLine: {lineStyle: {color: '#777'}},
                        axisLabel: {
                            formatter: function (value) {
                                return echarts.format.formatTime('MM-dd', value);
                            },
                            fontSize: 10,
                            rotate: 35,
                        },
                        min: 'dataMin',
                        max: 'dataMax',
                        axisPointer: {
                            show: true
                        }
                    }],
                    yAxis: [{
                        scale: true,
                        axisLine: {lineStyle: {color: '#777'}},
                        splitLine: {show: true},
                        axisTick: {show: false},
                        axisLabel: {
                            fontSize: 10
                        }
                    },{
                        scale: true,
                        axisLine: {lineStyle: {color: '#777'}},
                        axisTick: {show: false},
                        axisLabel: {
                            fontSize: 10
                        }
                    }],
                    series: [
                        {
                            name: '涨跌幅',
                            type: 'line',
                            yAxisIndex: 1,
                            symbol: 'none',
                            smooth: 0.5,
                            itemStyle:{
                                normal:{
                                    lineStyle: {
                                        width: 3.5
                                    },
                                    color:'#ef232a',
                                }
                            },
                            data: data_5.reverse()
                        },
                        {
                            name: 'N日大单资金净流入',
                            type: 'line',
                            symbol: 'none',
                            smooth: 0.5,
                            itemStyle:{
                                normal:{
                                    lineStyle: {
                                        width: 3.5
                                    },
                                    color: '#14b143'
                                }
                            },
                            data: data_3.reverse()
                        }
                    ]
                },
                option_4: {
                    legend: [{
                        top: 0,
                        data: ['涨跌幅','N日中单资金净流入'],
                        textStyle: {
                            fontSize: 12
                        }
                    }],
                    tooltip: {
                        trigger: 'axis',
                        transitionDuration:0,
                        axisPointer: {
                            type: 'line'
                        }
                    },
                    grid: [
                        {
                            left: '20%',
                            right: '20%',
                            bottom: 50,
                            top: 30
                        }
                    ],
                    dataZoom: [{
                        type: 'slider',
                        realtime: false,
                        start: 50,
                        end: 100,
                        top: 160,
                        height: 10,
                        handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                        handleSize: '120%'
                    }, {
                        type: 'inside',
                        start: 40,
                        end: 70,
                        top: 30,
                        height: 20
                    }],
                    xAxis: [{
                        type: 'category',
                        data: dates.reverse(),
                        boundaryGap: true,
                        axisLine: {lineStyle: {color: '#777'}},
                        axisLabel: {
                            formatter: function (value) {
                                return echarts.format.formatTime('MM-dd', value);
                            },
                            fontSize: 10,
                            rotate: 35,
                        },
                        min: 'dataMin',
                        max: 'dataMax',
                        axisPointer: {
                            show: true
                        }
                    }],
                    yAxis: [{
                        scale: true,
                        axisLine: {lineStyle: {color: '#777'}},
                        splitLine: {show: true},
                        axisTick: {show: false},
                        axisLabel: {
                            fontSize: 10
                        }
                    },{
                        scale: true,
                        axisLine: {lineStyle: {color: '#777'}},
                        axisTick: {show: false},
                        axisLabel: {
                            fontSize: 10
                        }
                    }],
                    series: [
                        {
                            name: '涨跌幅',
                            type: 'line',
                            yAxisIndex: 1,
                            symbol: 'none',
                            smooth: 0.5,
                            itemStyle:{
                                normal:{
                                    lineStyle: {
                                        width: 3.5
                                    },
                                    color:'#ef232a',
                                }
                            },
                            data: data_5.reverse()
                        },
                        {
                            name: 'N日中单资金净流入',
                            type: 'line',
                            symbol: 'none',
                            smooth: 0.5,
                            itemStyle:{
                                normal:{
                                    lineStyle: {
                                        width: 3.5
                                    },
                                    color: '#14b143'
                                }
                            },
                            data: data_2.reverse()
                        }
                    ]
                },
                option_5: {
                    legend: [{
                        top: 0,
                        data: ['涨跌幅','N日小单资金净流入'],
                        textStyle: {
                            fontSize: 12
                        }
                    }],
                    tooltip: {
                        trigger: 'axis',
                        transitionDuration:0,
                        axisPointer: {
                            type: 'line'
                        }
                    },
                    grid: [
                        {
                            left: '20%',
                            right: '20%',
                            bottom: 50,
                            top: 30
                        }
                    ],
                    dataZoom: [{
                        type: 'slider',
                        realtime: false,
                        start: 50,
                        end: 100,
                        top: 160,
                        height: 10,
                        handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                        handleSize: '120%'
                    }, {
                        type: 'inside',
                        start: 40,
                        end: 70,
                        top: 30,
                        height: 20
                    }],
                    xAxis: [{
                        type: 'category',
                        data: dates.reverse(),
                        boundaryGap: true,
                        axisLine: {lineStyle: {color: '#777'}},
                        axisLabel: {
                            formatter: function (value) {
                                return echarts.format.formatTime('MM-dd', value);
                            },
                            fontSize: 10,
                            rotate: 35,
                        },
                        min: 'dataMin',
                        max: 'dataMax',
                        axisPointer: {
                            show: true
                        }
                    }],
                    yAxis: [{
                        scale: true,
                        axisLine: {lineStyle: {color: '#777'}},
                        splitLine: {show: true},
                        axisTick: {show: false},
                        axisLabel: {
                            fontSize: 10
                        }
                    },{
                        scale: true,
                        axisLine: {lineStyle: {color: '#777'}},
                        axisTick: {show: false},
                        axisLabel: {
                            fontSize: 10
                        }
                    }],
                    series: [
                        {
                            name: '涨跌幅',
                            type: 'line',
                            yAxisIndex: 1,
                            symbol: 'none',
                            smooth: 0.5,
                            itemStyle:{
                                normal:{
                                    lineStyle: {
                                        width: 3.5
                                    },
                                    color:'#ef232a',
                                }
                            },
                            data: data_5.reverse()
                        },
                        {
                            name: 'N日小单资金净流入',
                            type: 'line',
                            symbol: 'none',
                            smooth: 0.5,
                            itemStyle:{
                                normal:{
                                    lineStyle: {
                                        width: 3.5
                                    },
                                    color: '#14b143'
                                }
                            },
                            data: data_1.reverse()
                        }
                    ]
                }
            })
        }).catch(function (error) {
            alert('未连接到服务器！');
        })
    }

    componentDidMount() {
        this.getData()
        this.interval = setInterval(()=>{
            if(this.props.location.state){
                this.setState({
                    default: "94%"
                })
            }else{
                this.setState({
                    default: "83%"
                })
            }
        },100)
    }

    componentWillUnmount() {
        clearInterval(this.interval)
    }

    render() {
        document.title = "资金统计分析";
        return (
            <div style={{width:this.state.default, height:"100vh", float:"right"}}>
                <div style={{width:"95%", height:"92vh", float:"left", margin:"0 0 0 4%"}}>
                    <ReactEcharts option={this.state.option_1} notMerge={true}
                                  style={{width:"100%", height:"46vh"}}/>
                    <ReactEcharts option={this.state.option_2} notMerge={true}
                                  style={{width:"50%", height:"25vh", float:"left"}}/>
                    <ReactEcharts option={this.state.option_3} notMerge={true}
                                  style={{width:"50%", height:"25vh", float:"left"}}/>
                    <ReactEcharts option={this.state.option_4} notMerge={true}
                                  style={{width:"50%", height:"25vh", float:"left"}}/>
                    <ReactEcharts option={this.state.option_5} notMerge={true}
                                  style={{width:"50%", height:"25vh", float:"left"}}/>
                </div>
            </div>
        );
    }
}